<template>
  <div class="box">
    <!-- autoplay 自动播放  loop循环播放  muted 声音 preload 预加载 -->
<!--    <video autoplay loop muted preload="auto"-->
<!--           style="width: 100%; height: 100%; object-fit: fill">-->
<!--      <source src="../assets/动态背景.mp4">-->
<!--    </video>-->
    <img src="../assets/动态背景11.gif" style="width: 100%; height: 100%; object-fit: fill" alt="">
    <div class="haha">
      <van-form @submit="onSubmit">
          <van-cell-group inset class="loginBackground">
            <br>
            <van-field
                v-model="userAccount"
                name="userAccount"
                label="账号"
                placeholder="请输入账号"
                :rules="[{ required: true, message: '请填写账号' }]"
            />
            <br>
            <van-field
                v-model="userPassword"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
            <br>
          </van-cell-group>


          <div style="margin: 20px;">
            <van-button round block  native-type="submit" class="ha">
              <div class="characters">登录</div>
            </van-button>

          <br>
          <van-button block round  plain size="normal" @click="doRegister" class="ha">
            <div class="characters">注册</div>
          </van-button>
          </div>
      </van-form>
    </div>
    <van-overlay :show="showBarrage" >
      <div class="wrapper" @click.stop>
        <van-barrage v-model="barrageList" ref="barrage" :delay="150" :auto-play="true">
          <div class="video" style="width: 100%; height: 150px"></div>
        </van-barrage>
      </div>
    </van-overlay>
  </div>

</template>

<script setup lang="ts">

import {useRouter} from "vue-router";
import myAxios from "../plugins/myAxios.ts";
import {onMounted, ref} from "vue";
import {showFailToast, showSuccessToast, showToast} from "vant";
import 'vant/es/toast/style'

const showBarrage = ref(false);

const defaultList = [
  { id: 100, text: '轻量' },
  { id: 101, text: '个性化' },
  { id: 102, text: '移动端' },
  { id: 103, text: '码上学习' },
  { id: 104, text: 'Java' },
  { id: 105, text: '发帖交流' },
  { id: 106, text: '666' },
  { id: 107, text: '视频学习' },
  { id: 108, text: '及时练习' },
  { id: 109, text: '课堂考试' },
  { id: 110, text: '轻量' },
  { id: 111, text: '个性化' },
  { id: 112, text: '移动端' },
  { id: 113, text: '码上学习' },
  { id: 114, text: 'Java' },
  { id: 115, text: '发帖交流' },
  { id: 116, text: '666' },
  { id: 117, text: '视频学习' },
  { id: 118, text: '及时练习' },
  { id: 119, text: '课堂考试' },
];

const barrageList = ref([...defaultList]);


const userAccount = ref('');
const userPassword = ref('');

const router = useRouter()

const doRegister = () =>{
  router.push("/user/register")
}

onMounted(() => {
  showToast("请登录")
})


const onSubmit = async () => {

  const res = await myAxios.post('/user/login', {
    userAccount: userAccount.value,
    userPassword: userPassword.value
  })
  console.log(res,'用户登录');
  if (res.data.code === 0){

    showBarrage.value = true;

    setTimeout(() => {
      showBarrage.value = false;

      router.push('/select')
      showSuccessToast('登录成功')

    },2000)


  }else {
    showFailToast('登录失败')
  }

};



</script>

<style scoped>

* {
  margin: 0;
  padding: 0;
}
.characters{
  font-size: 20px;
  font-weight: bolder;
  font-family: STXingkai,serif  ;
}
.loginBackground{
  font-size: 18px;
  letter-spacing: 5px;
  font-family: Arial,serif;
  font-weight: bold;
  background-image: url("../assets/登录栏.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.ha{
  background-image: url("../assets/最终长框按钮.png");

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;


  border-radius: 10px;
  font-weight: bold;
}

.haha{
  position: absolute;
  left: 20px;
  top: 150px;
  width: 90%;
  height: 60%;
  opacity: 0.8
}

.box{
  width: 100%;
  height: 100%;
}

.video{
  width: 100%;
  height: 100%;
  position:  relative;

  z-index: 1;
}
.wrapper {
  width: 100%;
  height: 70%;
  position: relative;
  top: 30%;
  left: 0;

}


</style>